<template>
    <div class="personalCenter">
        <div class="personalInfo">
            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2FpersonalCenter_bg.png" lazy-load>
            <div class="userInfo">
                <div class="userIcon">
                    <img :src="userInfo.avatarUrl" lazy-load>
                </div>
                <div class="userName">{{userInfo.nickName}}</div>
            </div>
        </div>
        <div class="studentDatum">学号：{{personalData.student}}</div>
        <div class="personalDatum">
            <div class="courseDatum">
                <form @submit.stop.prevent="goToPersonalCourse($event)" report-submit>
                    <button formType="submit" class="form-btn">
                        <div class="imageDatum">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fclasses%402x.png" lazy-load>
                        </div>
                        <div class="textDatum">已参与课程 <span>{{personalData.course}}</span> 门</div>
                    </button>
                </form>
            </div> 
            <div class="integralDatum">
                <div class="imageDatum">
                    <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fintegral%402x.png" lazy-load>
                </div>
                <div class="textDatum">积分 <span>{{personalData.integral}}</span></div>
            </div>
        </div>
        <div class="personalLine"></div>
        <div class="personalPrivate">
            <a class="teacherPrivate">
                <form @submit.stop.prevent="goToPersonalTeacher($event)" report-submit>
                    <button formType="submit" class="form-btn">
                        <div class="privateIcon">
                            <!-- <img src="http://mobuz-mp.gz.bcebos.com/matter%2FpersonalCenter_teacher.png" lazy-load> -->
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fmy_teacher%402x.png" lazy-load>
                        </div>
                        <div class="privateText">我的老师</div>
                        <div class="privateMore">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fright.png" lazy-load>
                        </div>
                    </button>
                </form>
            </a>
            <a class="taskPrivate">
                <form @submit.stop.prevent="goToPersonalMyJob($event)" report-submit>
                    <button formType="submit" class="form-btn">
                        <div class="privateIcon">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/Select_the_homework_red@2x.png" lazy-load>
                        </div>
                        <div class="privateText">我的作业</div>
                        <div class="privateMore">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fright.png" lazy-load>
                        </div>
                    </button>
                </form>
                <p class="privateHint" v-if="globalBadge.teach > 0"></p>
            </a>
            <a class="reviewPrivate">
                <form @submit.stop.prevent="goToPersonalCommentAndPraise($event)" report-submit>
                    <button formType="submit" class="form-btn">
                        <div class="privateIcon">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/comments_like@2x.png" lazy-load>
                        </div>
                        <div class="privateText">收到的评论和加油</div>
                        <div class="privateMore">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fright.png" lazy-load>
                        </div>
                    </button>
                </form>
                <p class="privateHint" v-if="globalBadge.praise > 0 || globalBadge.comment > 0"></p>
            </a>
            <a class="certificatePrivate">
                <form @submit.stop.prevent="goToPersonalCertificate($event)" report-submit>
                    <button formType="submit" class="form-btn">
                        <div class="privateIcon">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2FpersonalCenter_certifications.png" lazy-load>
                        </div>
                        <div class="privateText">我的证书</div>
                        <div class="privateMore">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fright.png" lazy-load>
                        </div>
                    </button>
                </form>
            </a>
            <a class="couponPrivate">
                <form @submit.stop.prevent="goToPersonalCoupon($event)" report-submit>
                    <button formType="submit" class="form-btn">
                        <div class="privateIcon">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter/vouchers@2x.png" lazy-load>
                        </div>
                        <div class="privateText">我的礼券</div>
                        <div class="privateMore">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fright.png" lazy-load>
                        </div>
                    </button>
                </form>
            </a>
            <a class="questionPrivate">
                <form @submit.stop.prevent="goToCommonProblem($event)" report-submit>
                    <button formType="submit" class="form-btn">
                        <div class="privateIcon">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2FpersonalCenter_problems.png" lazy-load>
                        </div>
                        <div class="privateText">常见问题</div>
                        <div class="privateMore">
                            <img src="http://mobuz-mp.cdn.bcebos.com/matter%2Fright.png" lazy-load>
                        </div>
                    </button>
                </form>
            </a>
        </div>
       
        <!-- 操作·引导页 -->
        <!-- <cover-view class="personalGuide" v-if="showGuide === 0" @click.stop.prevent="amendGuideState">
            <cover-view class="guideMask"></cover-view>
            <cover-view class="guideMatter">
                <cover-image class="guideImage" src="http://mobuz-mp.cdn.bcebos.com/course/guide/image/guide_teacher.png" />
            </cover-view>
        </cover-view> -->
    </div>
</template>

<script>
import {obtainPersonalCenter, saveStudentFormId, amendUserinfo} from '@/config/api'
import {triggerSocketWacthDadge} from "@/config/vuexUtils";
export default {
  data () {
    return {
      // 用户信息
      userInfo: [],
      // 用户数据
      userData: [],  
      // 个人数据
      personalData: [],
      // 是否显示 引导页
      showGuide: null  
    }
  },
  computed: {
    globalBadge() {
        return this.$store.state.globalBadge
    }
  },
  mounted () {
    let self = this
    // // 初始化 我的 界面
    // self.initPersonalCenter() 
  },
  methods: {
    // 初始化 我的 界面
    async initPersonalCenter () {
        let self = this;
        if (wx.getStorageSync('userInfo') && wx.getStorageSync('batch_id')) {
            // 本地用户信息
            self.userInfo = wx.getStorageSync('userInfo')
            // 是否显示 引导页
            self.showGuide = wx.getStorageSync('guide_state')
            console.log(self.userInfo, '....self.userInfo')
            wx.showNavigationBarLoading()
            const personalInfo = await obtainPersonalCenter(wx.getStorageSync('batch_id'), self.userInfo.openId, self.userInfo.unionId)
            // const personalInfo = await obtainPersonalCenter(self.userInfo.openId, 'oFulp0mYDObOdB04iOqgLGBqOYU4')
            if (personalInfo.status === 200) {
                // 个人数据
                self.personalData = personalInfo.data
                console.log(self.personalData, '.............')
            }
            wx.hideNavigationBarLoading()
            wx.stopPullDownRefresh()
        }
    }, 
    // 修改 显示引导页标识
    async amendGuideState () {
        let self = this;
        self.showGuide = 1
        // 个人中心引导页的状态（索引）
        wx.setStorageSync("guide_state", 1);
        // 修改 用户信息
        const amendState = await amendUserinfo(self.userInfo.openId, wx.getStorageSync('batch_id'), wx.getStorageSync('student_id'), self.showGuide, self.userInfo.unionId)
        console.log(self.showGuide, amendState, '...是否显示 引导页')
    },
    // 跳转到 我的老师
    async goToPersonalTeacher(e) {
        let self = this;
        // 保存用户点击的formid
        await saveStudentFormId(self.userInfo.openId, e.target.formId, self.userInfo.unionId)
        wx.navigateTo({
            url: '../personalTeacher/main'
        })
    },
    // 跳转到 我的证书
    async goToPersonalCertificate(e) {
        let self = this;
        // 保存用户点击的formid
        await saveStudentFormId(self.userInfo.openId, e.target.formId, self.userInfo.unionId)
        wx.navigateTo({
            url: '../personalCertificate/main'
        })
    },
    // 跳转到 我的礼券
    async goToPersonalCoupon(e) {
        let self = this;
        // 保存用户点击的formid
        await saveStudentFormId(self.userInfo.openId, e.target.formId, self.userInfo.unionId)
        wx.navigateTo({
            url: '../personalCoupon/main'
        })
    },
    // 跳转到 常见问题
    async goToCommonProblem(e) {
        let self = this;
        // 保存用户点击的formid
        await saveStudentFormId(self.userInfo.openId, e.target.formId, self.userInfo.unionId)
        wx.navigateTo({
            url: '../commonProblem/main'
        })
    },
    // 跳转到 参与课程
    async goToPersonalCourse(e) {
        let self = this;
        wx.navigateTo({
            url: '../personalCourse/main'
        })
        // 保存用户点击的formid
        const formIdState = await saveStudentFormId(self.userInfo.openId, e.target.formId, self.userInfo.unionId)
        console.log(formIdState, '......formIdState')
    },
    // 跳转我的评论和加油
    async goToPersonalCommentAndPraise () {
        let self = this;
        // 保存用户点击的formid
        // await saveStudentFormId(self.userInfo.openId, e.target.formId)
        wx.navigateTo({
            url: '../personalReceived/main'
        })
    },
    // 跳转我的作业
    async goToPersonalMyJob () {
        let self = this;
        // 保存用户点击的formid
        // await saveStudentFormId(self.userInfo.openId, e.target.formId)
        wx.navigateTo({
            url: '../personalTask/main'
        })
    }
  },
  // 下拉刷新
  onPullDownRefresh () {
    let self = this;
    // 初始化 我的 界面
    self.initPersonalCenter() 
  },
  onShow() {
    let self = this;  
    triggerSocketWacthDadge();
    // // 查看是否授权
    // wx.getSetting({
    //   success: function(res){
    //     if (res.authSetting['scope.userInfo']) {
    //       // 已经授权，可以直接调用 getUserInfo 获取头像昵称
    //       wx.getUserInfo({
    //         success: function(res) {
    //           console.log(res, '.............')
    //           // 本地用户数据
    //           self.userData = res.userInfo
              // 初始化 我的 界面
              self.initPersonalCenter()  
    //         }
    //       })
    //     }
    //   }
    // })

    console.log(self.$store.state.globalBadge, '66666')
    // // 监听Badge
    // self.$watch('globalBadge', function (data) {
    //     console.log(data, '监听Badge')
    // });
  },
//    onLoad() {
//     let self = this;  
//     // 查看是否授权
//     wx.getSetting({
//       success: function(res){
//         if (res.authSetting['scope.userInfo']) {
//           // 已经授权，可以直接调用 getUserInfo 获取头像昵称
//           wx.getUserInfo({
//             success: function(res) {
//               console.log(res, '.............')
//               if (res) {
//                 // 本地用户数据
//                 self.userData = res.userInfo
//                 wx.setStorage("userInfo", self.userData);
//                 // 初始化 我的 界面
//                 self.initPersonalCenter()  
//               }
              
//             }
//           })
//         }
//       }
//     })
//   },
}
</script>

<style>
page{
    width: 100%;
    height: 100%;
}
</style>
<style lang="less" scoped>
.personalCenter {
    width: 100%;
    // height: 100%;
    background: #ffffff;
    form {
        margin: 0 auto;
        .form-btn {
            border:none;
            text-align:left;
            padding:0;
            margin:0;
            background-color: transparent;
            height: 101rpx;
            line-height: 101rpx;
            &::after {
                border: none;
            }
        }
    }
    .personalInfo {
        width: 100%;
        height: 455.5rpx;
        position: relative;
        img {
            width: 100%;
            height: 100%;
        }
        .userInfo{
            position: absolute;
            top: 83rpx;
            // left: 50%;
            // margin-left: -76rpx;
            width: 100%;
            text-align: center;
            .userIcon{
                margin: 0 auto;
                width: 148rpx;
                height: 148rpx;
                border-radius: 50%;
                border: 4rpx solid #ffffff;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .userName{
                font-family: PingFangSC-Regular;
                font-size: 30rpx;
                color: #FFFFFF;
                margin-top: 20rpx;
            }
        }
    }

    .studentDatum{
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 24rpx;
        color: #999999;
        letter-spacing: 0.48rpx;
        text-align: center;
    }

    .personalDatum{
        width: 100%;
        font-size: 0;
        margin-top: 14rpx;
        margin-bottom: 21rpx;
        // height: 103rpx;
        // line-height: 103rpx;
        div{
            display: inline-block;
            vertical-align: middle;
            font-family: PingFangSC-Regular;
            font-size: 0;
        }
        .courseDatum{
            margin-left: 123rpx;
            .imageDatum{
                display: inline-block;
                vertical-align: middle;
                width: 33rpx;
                height: 30rpx;
                line-height: 30rpx;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .textDatum{
                display: inline-block;
                vertical-align: middle;
                margin-left: 9rpx;
                height: 33rpx;
                line-height: 33rpx;
                font-size: 24rpx;
                color: #999999;
                span{
                    color: #ee3a29;
                }
            }
        }
        .integralDatum{
            margin-left: 107rpx;
            .imageDatum{
                display: inline-block;
                vertical-align: middle;
                width: 30rpx;
                height: 23rpx;
                line-height: 23rpx;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .textDatum{
                display: inline-block;
                vertical-align: middle;
                margin-left: 12rpx;
                height: 33rpx;
                line-height: 33rpx;
                font-size: 24rpx;
                color: #999999;
                span{
                    color: #ee3a29;
                }
            }
        }
    }

    .personalLine{
        height: 22rpx;
        background: #fafafa;
    }

    .personalPrivate{
        a{
            padding-left: 47rpx;
            padding-right: 24rpx;
            border-bottom: 1rpx solid #eaeaea;
            height: 101rpx;
            line-height: 101rpx;
            cursor: pointer;
            position: relative;
            div{
                display: inline-block;
                vertical-align: middle;
                font-family: PingFangSC-Regular;
                font-size: 28rpx;
                color: #333333;
                line-height: 1; 
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .privateMore{
                width: 13rpx;
                height: 24rpx;
                float:right;
                clear:both;
                margin-top:37.5rpx;

            }
            .privateHint{
                position: absolute;
                left: 24rpx;
                top: 47.5rpx;
                width: 10rpx;
                height: 10rpx;
                border-radius: 50%;
                background-image: linear-gradient(-90deg, #FFB497 0%, #FE7A72 100%);
            }
        }
        .teacherPrivate{
            .privateIcon{
                width: 27rpx;
                height: 32rpx;
                line-height: 1; 
                margin-right: 15rpx;
            }
        }
        .taskPrivate{
            .privateIcon{
                width: 32rpx;
                height: 32rpx;
                line-height: 1; 
                margin-right: 13rpx;
            }
        }
        .reviewPrivate{
            .privateIcon{
                width: 30rpx;
                height: 27rpx;
                line-height: 1; 
                margin-right: 14rpx;
            }
        }
        .certificatePrivate{
            .privateIcon{
                width: 30rpx;
                height: 23rpx;
                line-height: 1; 
                margin-right: 14rpx;
            }
        }
        .couponPrivate{
            .privateIcon{
                width: 34rpx;
                height: 24.7rpx;
                line-height: 1; 
                margin-right: 12rpx;
            }
        }
        .questionPrivate{
            .privateIcon{
                width: 32rpx;
                height: 32rpx;
                line-height: 1; 
                margin-right: 12rpx;
            }
        }

    }
    
    .personalGuide{
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow: hidden;
        .guideMask{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: #000;
            opacity: 0.7;
        }
        .guideMatter{
            position: fixed;
            // position: absolute;
            // top: 0;
            .guideImage{}
        }
    }
}
</style>
